<template>
  <div class="situation-container">
    <div
      class="head"
      style="margin-top: 20px"
    >
      <el-radio-group
      @input="change"
        v-model="status"
        size="small"
      >
        <el-radio-button label="全部客户"></el-radio-button>
        <el-radio-button label="已完成客户"></el-radio-button>
        <el-radio-button label="进行中客户"></el-radio-button>
        <el-radio-button label="新客户"></el-radio-button>
      </el-radio-group>
      <div class="search">
        <el-input
          placeholder="请输入客户名"
          v-model="input"
          size="small"
        >
          <el-button
          @click="search"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="main">
      <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="客户ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="sellerName"
      label="销售人员">
    </el-table-column>
    <el-table-column
      prop="typeName"
      label="用户级别">
    </el-table-column>
    <el-table-column
      prop="preTime"
      label="最近互动时间">
    </el-table-column>
  </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { getCusPage,getCusByName,getCusByFlag } from "@/api/situation";
export default {
  name: 'Layout',
  mixins: [ResizeMixin],
  data () {
    return {
      input:'',
      page:1,
      pageSize:10,
      status: '全部客户',
      total:0,
      tableData:[]
    }
  },
  methods: {
    init(){
      getCusPage({currentPage:this.page,rows:this.pageSize}).then(res=>{
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val){
      this.page = val
      this.init()
    },
    search(){
      getCusByName({currentPage:this.page,rows:this.pageSize,name:this.input}).then(res=>{
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    change(label){
      let flag = 1
      if(label==='全部客户'){
       this.init()
      }
      if(label==='已完成客户'){
         flag =2
      }
      if(label==='进行中客户'){
         flag =3
      }
      if(label==='新客户'){
         flag =4
      }
      getCusByFlag({currentPage:this.page,rows:this.pageSize,flag:flag}).then(res=>{
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  },
  created(){
    this.init()
  },
  mounted(){
    this.init()
  }
}
</script>

<style  scoped>
.situation-container {
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
}
.head{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.search{
  width: 300px;
}
</style>